<script setup lang="ts">

import {useStore} from "vuex";
import {nextTick, onBeforeMount, reactive, ref} from "vue";
import http from "@/http";
// @ts-ignore
import moment from 'moment';
import {ElMessage, FormInstance, FormRules} from "element-plus";


const store = useStore();
const aa = () => {
  store.state.isCollpace = !store.state.isCollpace
}

//  查询参数
let queryParams = ref({
  deptName: undefined,
  status: undefined
})

let DeptStatus = [
  {
    id: 0,
    name: '正常'
  },
  {
    id: 2,
    name: '停用'
  }
]

// 时间转换
let timeUpdate = (time: any) => {
  return moment(time).format('YYYY-MM-DD HH:mm:ss')
}

let status = (state: any) => {
  if (state == 0) {
    return '正常'
  } else {
    return '停用'
  }
}

let menuList = ref([])

//  查询菜单
let menuSelectList = () => {
  http.post('/sysMenu/selectMenuList').then(requsest => {
    menuList.value = requsest.data
    console.log(requsest.data)
  })
}

onBeforeMount(() => {
  menuSelectList()
})


//  表单数据类型
interface RuleMenuForm {
  menuId: number,
  menuName: string,
  parentId: string,
  orderNum: number,
  component: string,
  status: string,
  icon: string,
  path: string,
  createBy: string,
  updateBy: string,
  remark: string
}

// 表单数据
let menuFrom = reactive<RuleMenuForm>({
  menuId: 0,
  menuName: '',
  parentId: '',
  orderNum: 0,
  component: '',
  status: '0',
  icon: '',
  path: '',
  createBy: '',
  updateBy: '',
  remark: ''
})
//  表单验证
const ruleFormRef = ref<RuleMenuForm>()
const rules = reactive<FormRules<RuleMenuForm>>({
  parentId: [
    {required: true, message: '上级菜单不能为空', trigger: 'blur'},
  ],
  menuName: [
    {required: true, message: '菜单名称不能为空', trigger: 'blur'},
  ],
  orderNum: [
    {required: true, message: '显示顺序不能为空', trigger: 'blur'},
  ],
  path: [
    {required: true, message: '路由地址不能为空', trigger: 'blur'},
  ]
})

//  部门树形菜单
const defaultProps = {
  children: 'children',
  label: 'menuName',
}

let dialogVisible = ref(false)
let title = ref(null)

//  新增点击
let clickMenuAdd = (row: any) => {
  // @ts-ignore
  title.value = "添加菜单"
  dialogVisible.value = true
  if (row != null) {
    menuFrom.parentId = row.menuId
  }
}

// 修改点击
let clickMenuUpdate = (row: any) => {
  // @ts-ignore
  title.value = "修改菜单"
  dialogVisible.value = true
  nextTick(() => {
    Object.assign(menuFrom, row)
  })
}


let removeDialog = ref(false)
let menuName = ref(null)
let menuId = ref(null)

let childrens = ref()
// 删除点击
let clickMenuRemove = (row: any) => {
  removeDialog.value = true
  menuName.value = row.menuName
  menuId.value = row.menuId
  childrens.value = row.children.length
}


let subMenuFrom = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(menuFrom)
      if (menuFrom.menuId == 0) {
        //   新增
        menuInsert()
        location.reload()
      } else {
        //   修改
        menuUpdate()
        location.reload()
      }

    }
  })
}

//  新增
let menuInsert = () => {
  http.post('/sysMenu/InsertMenu', menuFrom).then(res => {
    // @ts-ignore
    if (res.code == 200) {
      ElMessage({message: '新增菜单成功', type: 'success'})
      dialogVisible.value = false
      menuSelectList()
    }
  })
}

//  修改
let menuUpdate = () => {
  http.post('/sysMenu/UpdateMenu', {
    menuId: menuFrom.menuId,
    menuName: menuFrom.menuName,
    parentId: menuFrom.parentId,
    orderNum: menuFrom.orderNum,
    path: menuFrom.path,
    component: menuFrom.component,
    status: menuFrom.status,
    remark: menuFrom.remark
  }).then(res => {
    // @ts-ignore
    if (res.code == 200) {
      ElMessage({message: '修改菜单成功', type: 'success'})
      dialogVisible.value = false
      menuSelectList()
    }
  })
}

// 删除
let removeMenuById = () => {
  if (childrens.value != 0) {
    // @ts-ignore
    ElMessage({message: '存在下级菜单,不允许删除', type: 'error'})
    removeDialog.value = false
  } else {
    http.post('/sysMenu/RemoveMenuById',{menuId:menuId.value} ).then(res => {
      // @ts-ignore
      if (res.code == 200) {
        ElMessage({message: '删除菜单成功', type: 'success'})
        removeDialog.value = false
        menuSelectList()
        location.reload()
      }
    })

  }


}


// 表单重置
let resetForm = () => {
  // @ts-ignore
  ruleFormRef.value?.resetFields()
}

</script>


<template>

  <div>
    <!--   导航区   -->
    <div class="a1">
      <el-icon size="23" @click="aa">
        <Fold/>
      </el-icon>
      <div style="display: inline-block;margin-left: 10px;position: absolute;margin-top: 7px">
        <el-icon size="18" color="dodgerblue">
          <HomeFilled/>
        </el-icon>
      </div>
      <div style="display: inline-block;margin-bottom: 5px;margin-left: 30px;margin-top: 10px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item></el-breadcrumb-item>
          <el-breadcrumb-item><span style="font-size: 13px;color: black">系统管理</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="font-size: 12px;color: gray">菜单管理</span></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  </div>


  <div>
    <!-- 搜索框   -->
    <div class="section_search">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <div class="searchBach">
          <el-form-item label="菜单名称" prop="deptName">
            <el-input v-model="queryParams.deptName" class="search_input" placeholder="请输入菜单名称"/>
          </el-form-item>
        </div>
        <div class="searchBach">
          <el-form-item label="菜单" prop="status">
            <el-select clearable v-model="queryParams.status" style="width: 190px;" placeholder="菜单状态">
              <el-option v-for="dict in DeptStatus"
                         :key="dict.id"
                         :label="dict.name"
                         :value="dict.id"/>
            </el-select>
          </el-form-item>
        </div>
        <div class="searchBach">
          <el-form-item>
            <el-button class="search_button" type="primary" plain @click="">
              <el-icon style="margin-right: 5px">
                <Search/>
              </el-icon>
              搜索
            </el-button>
            <el-button class="search_button" type="info" plain @click="">
              <el-icon style="margin-right: 5px">
                <Refresh/>
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!--  新增按钮       -->
    <div style="margin-left: 10px; margin-top: 10px">
      <el-button @click="clickMenuAdd()" class="search_button" type="primary">
        <el-icon style="margin-right: 5px">
          <Plus/>
        </el-icon>
        新增
      </el-button>
    </div>

    <!--    表格数据区-->
    <div style="width: 100%; margin-top: 10px">
      <el-table
          :data="menuList"
          row-key="menuId"
          :header-cell-style="{'background-color':'whitesmoke','color':'#58626b'}"
          :row-style="{'height':'50px','font-size':'13px'}"
          :tree-props="{ children: 'children'}"
      >
        <el-table-column prop="menuName" label="菜单名称" align="left"></el-table-column>
        <el-table-column prop="icon" label="图标" align="center" width="70">
          <template #default="scope">
            <el-icon>
              <component :is="scope.row.icon"></component>
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" align="center" width="70"></el-table-column>
        <el-table-column prop="path" label="路由地址" align="center"></el-table-column>
        <el-table-column prop="component" label="组件路径" align="center"></el-table-column>
        <el-table-column prop="status" label="菜单状态" align="center">
          <template #default="scope">
            <span>{{ status(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
          <template #default="scope">
            <span style="margin-left: 10px">{{ timeUpdate(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button size="mini" type="text" @click="clickMenuAdd(scope.row)">
              <el-icon style="margin-right: 5px">
                <Plus/>
              </el-icon>
              新增
            </el-button>
            <el-button size="mini" type="text" @click="clickMenuUpdate(scope.row)">
              <el-icon style="margin-right: 5px">
                <Edit/>
              </el-icon>
              修改
            </el-button>
            <el-button size="mini" type="text" @click="clickMenuRemove(scope.row)">
              <el-icon style="margin-right: 5px">
                <Delete/>
              </el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

    </div>

  </div>


  <!--  新增、修改按钮弹出框-->
  <el-dialog v-model="dialogVisible" :title="title" width="600" @close="resetForm()">
    <el-form ref="ruleFormRef" :rules="rules" :model="menuFrom" status-icon label-width="auto"
             style="height: auto; margin-top: 20px">

      <div class="from_back">
        <el-form-item label="上级菜单" prop="parentId"
                      style="margin-top: 20px; padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-tree-select
              v-model="menuFrom.parentId"
              :data="menuList"
              :props="defaultProps"
              value-key="menuId"
              check-strictly
              placeholder="选择上级菜单"
          />
        </el-form-item>
      </div>

      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="菜单名称" prop="menuName"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="menuFrom.menuName" style="width: 200px" placeholder="请输入菜单名称"/>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="显示排序" prop="orderNum"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-space>
            <el-input-number v-model="menuFrom.orderNum" min="0" controls-position="right"/>
            <template #decrease-icon>
              <el-icon>
                <Minus/>
              </el-icon>
            </template>
          </el-space>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="路由地址" prop="path"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="menuFrom.path" style="width: 200px" placeholder="请输入菜单名称"/>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="组件路径" prop="component"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="menuFrom.component" style="width: 200px" placeholder="请输入组件路径"/>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="菜单状态" style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-radio-group v-model="menuFrom.status" class="ml-4" style="margin-top: -4px">
            <el-radio label="0" size="large">正常</el-radio>
            <el-radio label="1" size="large">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="from_back" style="height: 80px">
        <el-form-item label="备注" prop="remark"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="menuFrom.remark" style="width: 456px; height: 50px"
                    type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </div>

      <div class="dialog-footer" style="margin-top: 20px;margin-left: 420px ">
        <el-button type="primary" @click="subMenuFrom(ruleFormRef)">确定</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </div>
    </el-form>
  </el-dialog>


  <!--  删除弹出框-->
  <el-dialog v-model="removeDialog" title="警告" width="500" style="height: 160px;margin-top: 240px;font-weight: bold">
    <div style="font-weight: lighter; margin-top: 12px">
      <el-icon size="24px" color="#e4b53d" style="vertical-align: -5px;">
        <WarningFilled/>
      </el-icon>
      是否确认删除名称为" {{ deptNames }} "的菜单项?
    </div>
    <template #footer>
      <div class="dialog-footer" style="margin-top: 6px">
        <el-button type="primary" @click="removeMenuById()">确定</el-button>
        <el-button @click="removeDialog=false">取消</el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped lang="scss">
.a1 {
  width: 100%;
  height: 50px;
}

.section_search {
}

.searchBach {
  border-radius: 10px;
  display: inline-block;
  line-height: 65px;
  height: 52px;
  padding-left: 25px;
}

.searchBach:hover {
  background: aliceblue;
}

.search_input {
  height: 32px;
  width: 200px;
}

.search_button {
  width: 80px;
  height: 32px;
  font-size: 13px;
}

.from_back {
  border-radius: 10px;
  height: 60px;
}

.from_back:hover {
  background: aliceblue;
}


::v-deep .el-table__body {
  //-webkit-border-horizontal-spacing: 13px;  // 水平间距
  -webkit-border-vertical-spacing: 10px; // 垂直间距
}

::v-deep .el-table, .el-table__expanded-cell {
  background-color: transparent
}

.el-button {
  font-size: 13px;
}

</style>